<template>
  <view class="">
    <xxm-child @add="onAdd" @change="onChange"></xxm-child>
    <view class="box" :style="{backgroundColor: color,fontSize:size+'px'}">num:{{num}}</view>
  </view>
</template>

<script setup>
  import { ref, computed } from 'vue'
  const num = ref(0)
  const color = ref('#ccc')
  const size = ref(12)

  function onAdd(e) {
    num.value = e
    color.value = '#' + String(e).substring(3, 6)
  }

  function onChange(e) {
    size.value = e
  }
</script>

<style lang="scss">
  .box {
    width: 200px;
    height: 200px;
  }
</style>